<template>
  <div>
    <MyProduct
    v-for="item in list"
    :key="item.id"
    :title="item.proname" 
    :price="item.proprice" 
    :info="msg"
    :props="item.id"
    @sayPrice="sayPrice" />
  </div>
</template>

<script>
// 引入
import MyProduct from './components/MyProduct.vue'
// 注册
// 使用

// 父向子传值
// 1. 在父组件中给子组件标签添加自定义属性
// 2. 在子组件中使用 props 来接收
export default {
  components: {
    MyProduct
  },
  data() {
    return {
      list: [
        { id: 1, proname: '超级无敌椰子鸡儿', proprice: 69 },
        { id: 2, proname: '超级无敌棒棒鸡儿', proprice: 59 },
        { id: 3, proname: '超级无敌钵钵鸡儿', proprice: 49 }
      ],
      msg: '美味!'
    };
  },
  methods: {
    sayPrice(num) {
      // console.log(num)
      const i = this.list.find(item => item.id == num)
      if (i.proprice <= 2) {
        i.proprice = i.proprice
      } else {
      i.proprice -= 2
      }
    }
  }
};
</script>

<style scoped>

</style>